<template>
  <div class="gltfload">
    <div class="gltf" @contextmenu.prevent="onContextmenu">
      <!-- <p>加载fbx</p> -->
      <div id="gltf-mycnavas" class="gltf-mycnavas" ref="threeTarget" @contextmenu.prevent="onContextmenu"></div>
      <div class="changeBox">
        <div v-for="item in modelList" :key="item.id">
          <input type="button" :value="item.modelName" @click="AddGltfModel(item.model)" />
        </div>
      </div>
      <div class="title-box" v-if="show">
        <div class="children">position:{{ cameraPosition.position }}</div>
        <div class="children">rotation:{{ cameraPosition.rotation }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import './LoadGltf.less'

import { PMREMGenerator, Color, Box3, Vector3 } from 'three'
import { TEngine } from '@/components/Three/JS/Eengie.js'
import { LightsList } from '@/components/Three/JS/Light.js'
import { HelperList } from '@/components/Three/JS/Helper.js'
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js'
import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'

var GltfTE
export default {
  data() {
    return {
      modelList: [
        { modelName: '咖啡杯', model: 'coffeemat' },
        { modelName: '头盔', model: 'DamagedHelmet' },
        { modelName: '商城一层', model: 'ThreeGltf' },
        { modelName: '商城二层', model: 'NewProject' }
      ],
      show: false,
      cameraPosition: { position: {}, rotation: {} },
      removeModel: ''
    }
  },
  mounted() {
    this.Main()
    window.addEventListener('click', (e) => {
      e.preventDefault()
      document.getElementById('gltf-mycnavas').onmousedown = (e) => {
        if (e.button == 2) {
          this.show && (this.show = true)
          console.log('你点了右键')
          // alert('你点了右键')
        } else if (e.button == 0) {
          this.show = false
          console.log('你点了左键')
          // alert('你点了左键')
        } else if (e.button == 1) {
          this.show = false
          console.log('你点了滚轮')
          // alert('你点了滚轮')
        }
      }
    })
  },
  methods: {
    Main() {
      console.log(1111111111111)
      const threeTarget = this.$refs.threeTarget
      GltfTE = new TEngine(threeTarget)
      // console.log(LightsList)
      GltfTE.scene.add(...LightsList)
      GltfTE.scene.add(...HelperList)
      const environment = new RoomEnvironment()
      const pmremGenerator = new PMREMGenerator(GltfTE.renderer)
      GltfTE.scene.background = new Color(0xbbbbbb)
      GltfTE.scene.environment = pmremGenerator.fromScene(environment).texture
      // console.log(GltfTE, 'myTE')
      // this.AddGltfModel('DamagedHelmet')
      this.AddGlbModel('coffeemat')
    },
    AddGlbModel(name) {
      // GltfTE.camera.position.set(0, 100, 0)
      this.removeModel && this.removeModel.removeFromParent()

      const ktx2Loader = new KTX2Loader().setTranscoderPath('/JS/basis/').detectSupport(GltfTE.renderer)
      const loader = new GLTFLoader().setPath('/glTF/')
      loader.setKTX2Loader(ktx2Loader)
      loader.setMeshoptDecoder(MeshoptDecoder)
      loader.load(name + '.glb', (gltf) => {
        this.removeModel = gltf.scene
        gltf.scene.position.y = 8

        GltfTE.scene.add(gltf.scene)

        // render()
      })
    },
    AddGltfModel(name) {
      this.removeModel && this.removeModel.removeFromParent()
      const gltfmodel = new Promise((resolve, reject) => {
        const dracoLoader = new DRACOLoader()
        dracoLoader.setDecoderPath('/JS/GltfJs/')
        const result = dracoLoader
        const loader = new GLTFLoader().setPath('/glTF/')
        loader.setDRACOLoader(result)
        loader.load(name + '.gltf', function (gltf) {
          const scene = gltf.scene || gltf.scenes[0]
          resolve(scene)
        })
        reject
      })
      gltfmodel.then((gltf) => {
        this.removeModel = gltf
        console.log(gltf, '我的gltf模型')
        const box = new Box3().setFromObject(gltf)
        const center = box.getCenter(new Vector3())
        gltf.position.x += gltf.position.x - center.x
        gltf.position.y += gltf.position.y - center.y + 10
        gltf.position.z += gltf.position.z - center.z
        GltfTE.scene.add(gltf)
      })
    }
  }
}
</script>
<style lang="less" scoped></style>
